<template>
	<view class="container">
		<view class="title">
			<view class="block"></view>
			<view class="text">如何生成卡片：<span class="spanone">下方查看操作视频及文字分解步骤</span></view>
		</view>
		<video id="myVideo" src="https://dysx-h5.shjiuliwl.com/Eblock/images/shili3.mp4"
		show-mute-btn="true" autoplay controls></video>
		<view class="main">
			<p class="text">1、使用<span style="color: rgba(245, 42, 42, 1);">苹果手机</span>打开抖音APP；</p>
			<p class="text">2、将上面生成的卡片链接，通过抖音内私信发送给任意好友；</p>
			<p class="text">3、自己点击已发送给好友的链接（打开后会自动跳到微信）；</p>
			<p class="text">4、返回到抖音 APP，点击页面右上角进行转发操作，再次转发给该好友，即可完成卡片制作；</p>
		</view>
	</view>
</template>		

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}	
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		padding: 10rpx 0 0 0;
		overflow: auto;
		font-family: '思源黑体';	
		background-color: rgba(255, 255, 255, 1);
		.title{
			width: 750rpx;
			height: 60rpx;
			// padding-top: 20rpx;
			margin: 0 auto;
			display: flex;
			.block{
				width: 8rpx;
				height: 32rpx;
				background-color: rgba(15, 74, 252, 1);
				margin: 14rpx 0 0 20rpx;
				border-radius: 4rpx;
			}
			.text{
				width: 700rpx;
				height: 60rpx;
				font-size: 32rpx;
				font-weight: 700;
				// border: 1px solid black;
				line-height: 60rpx;
				color: rgba(0, 0, 0, 1);
				margin: 0 0 0 12rpx;
				.spanone{
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
				}
			}
		}  
		#myVideo{
			width: 710rpx;
			height: 320rpx;
			border: 1px solid black;
			border-radius: 12rpx;
			margin: 20rpx;
		}
		.main{
			width: 710rpx;
			margin:  0 auto;
			margin-top: 0rpx;
			.text{
				font-size: 28rpx;
				line-height: 50rpx;
				color: rgba(56, 56, 56, 1);
				margin-top: 30rpx;
			}
		}
	}
</style>
